<template>
  <div>
    <slot name="beforeInput"></slot>
    <el-input ref="jsonDataInput"
              :value="value"
              :placeholder="inputPlaceHolder"
              @blur="this.inputBlur"></el-input>
    <slot name="afterInput"></slot>
    <slot name="beforeJsonEditor"></slot>
    <jsonEditor ref="jsonDataEditor"
                @blur="this.jsonBlur"
                :value="value"></jsonEditor>
    <slot name="afterJsonEditor"></slot>
  </div>
</template>

<script>
export default {
  name: 'jsonInput',
  data() {
    return {}
  },
  props: {
    value: {
      String,
      default: '{}'
    },
    inputPlaceHolder: {
      String,
      default: ''
    }
  },
  mounted() {},
  watch: {
    value(value) {
      // console.debug('watch %s', value)
    }
  },
  methods: {
    jsonBlur(value) {
      // console.debug('jsonBlur: %s', value)
      this.$emit('jsonBlur', value)
    },
    inputBlur(event) {
      // console.debug('inputBlur: %s', event.target.value)
      this.$emit('inputBlur', event.target.value)
    }
  }
}
</script>
